<!-- 通用头部 -->
<template>
	<view
		class="commonHeader"
		:style="{
			'--fss': app.theme.fss(),
			'--background': background,
			'--leftWidth': leftWidth,
			'--rightWidth': rightWidth,
			'--color': color
		}"
	>
		<status-bar></status-bar>
		<view class="commonMain flex">
			<view class="left flex">
				<slot name="left">
				    <view class="leftBack iconfont icon-xiangzuo1" @tap="goBack()"></view>
				</slot>
			</view>
			<view class="center flex">
				<slot name="center">
				    <view class="title ell">{{ title }}</view>
				</slot>
			</view>
			<view class="right flex">
				<slot name="right"></slot>
			</view>
		</view>
		<slot name="foot"></slot>
	</view>
	<view class="commonPlace" :style="{ '--footHeight': footHeight }" v-if="!fixed">
		<status-bar></status-bar>
		<view class="footHeight"></view>
	</view>
</template>

<script setup>
	import { ref, inject, defineProps, defineEmits } from "vue";
	const app = inject('app');
	
	/* props父组件传参区域 */
	// 接受props
	const prop = defineProps({
		
		// 标题
		title:{
			type: String,
			default: "标题"
		},
		
		// 背景颜色
		background:{ 
			type: String,
			default: "#202122"
		},
		
		// 字体颜色
		color:{ 
			type: String,
			default: "#FFF"
		},
		
		// 左边单独按钮的宽度
		leftWidth:{ 
			type: String,
			default: "60rpx"
		},
		
		// 右边单独按钮的宽度
		rightWidth:{ 
			type: String,
			default: "60rpx"
		},
		
		// 是否直接为fixe定位，不设置占位符
		fixed:{
			type: Boolean,
			default: false
		},
		
		// 导航栏底部tab高度
		footHeight:{
			type: String,
			default: "0rpx"
		},
		
		// 返回按钮拦截
		backIntercept:{
			type: Boolean,
			default: false,
		},
		
	});
	
	// 触发父级页面的监听方法
	const emit = defineEmits(["goBack"]);
	
	/* 方法区域 */
	// 返回上一页
	function goBack(){
		if(prop.backIntercept){
			emit("goBack");
		}else{
			app.util.goBack();
		}
	}
</script>

<style lang="scss" scoped>
	.commonHeader{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: var(--background);
		.commonMain{
			padding: 0 25rpx;
			height: 100rpx;
			flex-direction: row;
			align-items: center;
			.left{
				height: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: var(--leftWidth);
				color: var(--color);
				.leftBack{
					line-height: 90rpx;
					padding: 0 20rpx;
					margin-left: -30rpx;
					font-size: calc(30rpx * var(--fss));
					opacity: 0.8;
					transition: 0.2s all;
					&:active{
						opacity: 0.6;
					}
				}
			}
			.center{
				flex: 1;
				width: 0;
				margin: 0 20rpx;
				height: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				color: var(--color);
				font-size: calc(30rpx * var(--fss));
				font-weight: bold;
			}
			.right{
				height: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: var(--rightWidth);
				color: var(--color);
			}
		}
	}
	.commonPlace{
		padding-bottom: 100rpx;
		.footHeight{
			height: var(--footHeight);
		}
	}
</style>